<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <div id="box">
    {{text}}
    <br>

    {{count}}
    <button @click="add">增加</button>
    <hr>
    obj: {{obj}}
    <button @click="add1">增加年龄</button>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>

  <script>


    new Vue({
      el: '#box',
      data: {
        text: 'hello Vue',
        count: 10,
        obj: {
          age: 18
        }
      },
      methods: {
        add () {
          this.count += 10
        },
        add1 () {
          this.obj.age += 1
        },

      },
      //监听器
      watch: {
        // 每次监听新的值,和旧的值
        count (newcount, oldcount) {
          console.log(newcount, oldcount);
        },
        // 方法1：表示具体监听到对象的某个值发生改变
        // 'obj.age'(newobj) {
        //   // console.log(newobj);
        // },

        // 表示具体监听到对象的某个值发生改变6
        obj: {
          handler (newobj) {
            console.log(newobj.age);
          },
          //对复杂类型进行深度监听
          deep: true,
          // 初始化 立刻执行一次
          immdiate: true,
        },


      }
    })




  </script>

</body>

</html>